<template>
	<view class="content">
		<custom-tabs></custom-tabs>
		<custom-form></custom-form>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<uni-badge text="1"></uni-badge>
			<text class="title" @click="f1">{{ title }}</text>
			<text class="title" @click="f1">{{ title }}</text>
			<text class="title" @click="f1">{{ title }}</text>
			<comA class="com-a"></comA>            
			<com-b></com-b>
		</view>
		<view style="height: 100vh;">
			
		</view>
	</view>
</template>

<script setup>
	import { getCurrentInstance, onMounted, ref } from 'vue';
	import comA from "../../coms/com-a.vue"

	onMounted(() => {
		// 获取控制器
		// const selectorQuery = uni.createSelectorQuery();
		
		// 查阅类型为 .logo 的一个 Dom 元素
		// selectorQuery.select(".logo").boundingClientRect(res => {
		// 	console.log(res);
		// })
		
		// 查询所有类型为 .title 的 Dom 元素
		// selectorQuery.selectAll(".title").boundingClientRect(resAll => {
		// 	console.log(resAll);
		// })
		
		// 查询屏幕的信息
		// selectorQuery.selectViewport().scrollOffset(res => {
		// 	console.log(res);
		// })
		
		// setInterval(() => {
		// 	selectorQuery.exec();
		// }, 50000)
		
		
		// 获取自定义组件的控制器
		const instance = getCurrentInstance();
		const query = uni.createSelectorQuery().in(instance.proxy)
		
		query.select(".com-a").boundingClientRect(res => {
			console.log(res);
		}).exec()
	});

	let title = ref('page1');

	// 自执行函数
	// 内部数据不会被外部访问
	const bbf = function(){
		let title = "798";
		return function() {
			return title+"798"
		}
	}()

	
	let f1 = () => {
		console.log(bbf());
		
		// #ifdef H5

		uni.showToast({
			title: '在网页能用吗',
		});
		console.log('web 打印日志');
		// #endif

		// #ifdef MP-WEIXIN
		uni.showToast({
			title: '在微信能用吗',
		});
		console.log('微信 打印日志');
		// #endiff
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
01 1
